<template>
  <d2-container>

    <template slot="header">
      <el-form :gutter="24" ref="search-box" :model="mainQuery"  label-position="right" :inline="true" label-width="100px" size="mini">
        <el-form-item label="通道名称：" size="mini">
          <el-input placeholder="" v-model="mainQuery.channelName" @keyup.enter.native="fetchMainData" size="small" clearable></el-input>
        </el-form-item>

        <el-form-item label="时间区间：" size="mini">
          <el-date-picker
            size="small" 
            v-model="mainQuery.statMonth"
            type="monthrange"
            value-format="yyyy-MM"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="search-btn-box">
        <div>
          <el-button class="filter-item" icon="el-icon-download" size="small" @click="handleExportExcel" v-if="$options.filters['checkButtonAccess']('statMonthlyTrade-financeList')">导出</el-button>
        </div>
        <div class="right">
          <el-button class="filter-item" icon="" type="default" @click="resetMainData" :loading="mainTable.loading" size="small">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="fetchMainData" :loading="mainTable.loading" size="small">查询</el-button>
        </div>
      </div>
    </template>

    <d2-crud
      selection-row
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :loading="mainTable.loading"
      :selection-row="mainTable.allowSelect"
      :rowHandle="mainTable.rowHandle"
      @current-change="onMainCurrentChange"
      @selection-change="onMainSelectionChange"
      @custom-emit-handle-set-settle-amount="handleSetSettleAmount"
      @custom-emit-handle-currency-trans="handleCurrencyTrans"
    ></d2-crud>

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        >
      </el-pagination>
    </template>

    <dialog-set-settle-amount ref="dialog-set-settle-amount" @dialog-close="fetchMainData"></dialog-set-settle-amount>

    <dialog-currency-trans ref="dialog-currency-trans" @dialog-close="fetchMainData"></dialog-currency-trans>


    <common-export ref="common-export"></common-export>
 
  </d2-container>
</template>

<script>

import { checkButtonAccess } from '@/filters';
import ApiMain from '@/api/statMonthlyTrade';
import FinanceApiMain from '@/api/finance';
import CommonExport from '../../common/export';
import ColumnSettleAmount from './column-settle-amount';
import DialogSetSettleAmount from './dialog-set-settle-amount';
import DialogCurrencyTrans from './dialog-currency-trans';
import util from '@/libs/util.js';

export default {
  name: 'finance-channel',
  mixins: [
  ],
  components: {
    'common-export': CommonExport,
    'column-settle-amount': ColumnSettleAmount,
    'dialog-set-settle-amount': DialogSetSettleAmount,
    'dialog-currency-trans': DialogCurrencyTrans,
  },
  data () {
    return {

      mainQuery: {
        type: 'channel',
        channelName: '',
        statMonth: [],
      },

      mainTable: {
        loading: false,
        options: {
          border             : true,
          stripe             : true,
          highlightCurrentRow: true,
          emptyText          : '暂无数据',
          size               : 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          {title: '统计月份', key: 'statMonth', align: 'left', width: '80', showOverflowTooltip: true},
          {title: '通道号', key: 'channelNo', align: 'left', width: '100', showOverflowTooltip: true},
          {title: '通道名称', key: 'channelName', align: 'left', width: '120', showOverflowTooltip: true},

          {title: '交易手续费率', key: 'serviceFeeRate', align: 'right', width: '100', showOverflowTooltip: true, formatter: this.formatPercent},
          {title: '通道结算币种', key: 'settleCurrency', align: 'right', width: '130', showOverflowTooltip: true},
          {title: '通道结算金额', key: 'settleAmount', align: 'right', width: '130', showOverflowTooltip: true, formatter: this.formatPrice
          // component: {
          //     name: ColumnSettleAmount,
          //   },
          },
          {title: '转换商户结算金额', key: 'currencyTransMchSettleAmount', align: 'right', width: '130', showOverflowTooltip: true, formatter: this.formatPrice},
          {title: '总销售分润', key: 'currencyTransSalesCommission', align: 'right', width: '100', showOverflowTooltip: true, formatter: this.formatPrice},
          {title: '一级分润', key: 'currencyTransSalesCommission1', align: 'right', showOverflowTooltip: true, formatter: this.formatPrice},
          {title: '二级分润', key: 'currencyTransSalesCommission2', align: 'right', showOverflowTooltip: true, formatter: this.formatPrice},
          {title: '利润', key: 'profit', align: 'right', width: '100', showOverflowTooltip: true, formatter: this.formatPrice},
        ],

        rowHandle: {
          width: '280',
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: '设置结算金额',
              type: 'default',
              size: 'mini',
              emit: 'custom-emit-handle-set-settle-amount',
              show (index, row) {
                return checkButtonAccess('statMonthlyTrade-setChannelSettleAmount');
              }
            },
            {
              text: '设置商户转换汇率',
              type: 'primary',
              size: 'mini',
              emit: 'custom-emit-handle-currency-trans',
              show (index, row) {
                return checkButtonAccess('statMonthlyTrade-getTradeChannelList');
              }
            },
          ]
        },
        list: [],

        pagination: {
          currentPage: 1,
          pageSize   : 50,
          total      : 0,
          pageSizes  : [50, 100, 200]
        },
        selectionRow: [],
      },

      dateTimeRange: [],
      fullLoading: true,
      tExportLog: null,
    }
  },
 
  mounted () {
    this.resetMainData();
  },

  methods: {

    formatPercent (row, col, val, index) {
      return (this.emptyToZero(val) / 100).toFixed(2) + '%';
    },

    formatPrice (row, col, val, index) {
      return (this.emptyToZero(val) / 100).toFixed(2);
    },

    emptyToZero (val = null) {
      return !val ? 0 : val;
    },

    renderMainData (re) {
      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange (val) {
      this.mainTable.pagination.pageSize = val;
      this.fetchMainData()
    },
    handleMainPageChange (val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    buildMainQuery () {

      var query = {
        page  : this.mainTable.pagination.currentPage,
        limit : this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData () {
      this.fetchMainData();
    },

    async fetchMainData () {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.financeList(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) {}

      this.mainTable.loading = false;

    },

    onMainCurrentChange (now, old) {
      this.mainTable.current = now;
    },

    onMainSelectionChange (now, old) {
      this.mainTable.selectionRow = now
    },

    handleExportExcel () {
      let mainQuery = Object.copy(this.mainQuery);
      mainQuery.type = 'channel';
      this.$refs['common-export'].handleExportExcel(FinanceApiMain, this.mainQuery, false, 'statMonth');
    },

    handleSetSettleAmount ({ index, row }) {
      this.$refs['dialog-set-settle-amount'].show(row.id, row.settleAmount);
    },

    handleCurrencyTrans ({ index, row }) {
      this.$refs['dialog-currency-trans'].show(row);
    },

  }
}
</script>

<style>

</style>
